﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>
<%--写一个注册界面
用户名：
密码：不能明文显示
性别：只能单选
爱好：
籍贯：省  市
其它信息：多行文本框
头像：
提交按钮

提交后，在下方显示提交的数据。--%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            margin:0;
            padding:0;
            font-size:15px;
        }
        #father {
            width:400px;
            padding-left:50px;
            margin:0 auto;
        }
        h1 {
            font-size:30px;
        }
        td {
            padding-bottom:15px;
        }
        .title {
            text-align:center;
        }
        #gender * {
            display:inline-block;
            padding-top:2px;
            padding-right:2px;
        }

    </style>
    <script type="text/javascript">
        function check() {
            var tbxUserName = document.getElementById("tbxUserName");
            var tbxPassword = document.getElementById("tbxPassword");


            if (tbxUserName.value == "" || tbxPassword.value == "") {
                alert("用户名或密码不能为空");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="father">
            <tr class="title">
                <td colspan="2">
                    <h1>
                        注&nbsp;&nbsp;&nbsp;&nbsp;册
                    </h1>
                </td>
            </tr>

            <tr>
                <td>用户名：</td>
                <td>
                    <asp:TextBox ID="tbxUserName" runat="server"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td>密码：</td>
                <td>
                    <asp:TextBox ID="tbxPassword"  runat="server" TextMode="Password"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td>性别：</td>
                <td id="gender">
                    <asp:RadioButtonList ID="rblGender" runat="server">
                        <asp:ListItem Value="male">男</asp:ListItem>
                        <asp:ListItem Value="female">女</asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>

            <tr>
                <td>爱好：</td>
                <td>
                    <asp:TextBox ID="tbxHobby" runat="server" TextMode="MultiLine"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td>籍贯:</td>
                <td>
                    <asp:DropDownList ID="ddlProvince" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged"></asp:DropDownList>省
                    &nbsp;&nbsp
                    <asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>市
                </td>
            </tr>

            <tr>
                <td>其他信息：</td>
                <td>
                    <asp:TextBox ID="tbxInfo" TextMode="MultiLine" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>头像：</td>
                <td>
                    <asp:FileUpload ID="fulImage" runat="server" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnSubmit" OnClientClick="return check();" runat="server" Text="提交" OnClick="btnSubmit_Click" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Label ID="ltrInfo" runat="server" Width="200px" Text=""></asp:Label>
                    <br />
                    <asp:Literal ID="ltrImg" runat="server">头像：</asp:Literal>
                    <asp:Image ID="img" runat="server" Height="100px" Width="100px" ImageAlign="Middle" />
                </td>
            </tr>
        </table>
    </form>

</body>
</html>
